<template>
  <div class="listGripTable">
    <a-row class="listGripTable-row">
        <a-col :flex="labelWidth">
          <div class="row-col-label" :style="colLabelStyle">{{ label }}</div>
        </a-col>
        <a-col flex="auto">
          <div class="row-col-value" :style="colValueStyle">
            <span v-if="checkbox">
               <CheckIcon v-if="checkedValue == value" status="checked"/>
               <CheckIcon v-if="uncheckedValue == value" status="unChecked"/>
            </span>
            <span v-if="!checkbox">{{ value }}</span>
          </div>
        </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import CheckIcon from '@/views/clues/components/check-icon.vue'
import { computed, watch } from 'vue';

let props = defineProps({
    label: {
      type: String,
      default: ()=> ''
    },
    value: {
      type: [String, Number],
      default: ()=> ''
    },
    labelWidth: {
      type: String,
      default: ()=> '200px'
    },
    checkbox: {
      type: Boolean,
      default: ()=> false
    },
    checkedValue:{
      type:[String , Number],
      default: ()=> 1
    },
    uncheckedValue:{
      type:[String , Number],
      default: ()=> 0
    },
    labelBorder: {
      type: Array, ///顺序 ['上','右','下','左']
      default: ()=> [true,true,true,true]
    },
    valueBorder: {
      type: Array, ///顺序 ['上','右','下','左']
      default: ()=> [true,true,true,true]
    }
})

const colLabelStyle = computed(()=>{
  let [ top, right, bottom, left ] = props.labelBorder;
   return {
      borderTop: top == true ? '1px solid' : 'none',
      borderRight: right == true ? '1px solid' : 'none',
      borderBottom: bottom == true ? '1px solid' : 'none',
      borderLeft: left == true ? '1px solid' : 'none',
      borderColor: '#EBEBEB',
   }
})

const colValueStyle = computed(()=>{
  let [ top, right, bottom, left ] = props.valueBorder;
   return {
    borderTop: top == true ? '1px solid' : 'none',
    borderRight: right == true ? '1px solid' : 'none',
    borderBottom: bottom == true ? '1px solid' : 'none',
    borderLeft: left == true ? '1px solid' : 'none',
    borderColor: '#EBEBEB',
   }
})

</script>

<style scoped lang='less'>
   @commom-height: 60px;

  .listGripTable{
    height: @commom-height;
  }

  .row-col-label,
  .row-col-value{
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    height: @commom-height;
    text-align: center;
    line-height: @commom-height;

  }
  .row-col-label{
    background: #F8F8F8;
    border-color: #EBEBEB;
  }

  .row-col-value{
    text-align: left;
    padding-left: 12%;
    align-items: center;
    vertical-align: middle;
    background: #FFFFFF;
    border-color: #EBEBEB;
   }

</style>